<template>
	<view class="content-pop">
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @click.stop="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" :canvas-id="this.canvasId"
				:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
	</view>
</template>
<script>
	import _app from '@/plugin/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/plugin/QS-SharePoster/QS-SharePoster.js';
	export default {
		name: 'posters-share',
		props: {
			url: {
				default: '',
				type: String
			},
			posterId: String,
			address: String,
			shareText: Object,
			usdRate: {
				default: 0,
				type: [String, Number]
			}
		},
		data() {
			return {
				loading: false,
				poster: {},
				qrShow: false,
				canvasId: this.posterId,
				count: 0
			}
		},
		mounted() {
			this.shareFc();
		},
		created() {
			uni.$on('saveImageToPhotosAlbum', (id) => {
				if (id == this.posterId) {
					this.saveImage();
				}
			})
		},
		beforeDestroy() {
			uni.$off('saveImageToPhotosAlbum');
		},
		methods: {
			async shareFc() {
				let _this = this;
				try {
					this.count++;
					const d = await getSharePoster({
						_this: _this, 
						type: 'png',
						posterCanvasId: _this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						bgScale: 1,
						background: {
							height: 393,
							width: 276
						},
						setCanvasToTempFilePath: function() {
							return {
								fileType: 'png',
								quality: 1
							}
						},
						setCanvasWH({
							bgObj
						}) {
							_this.poster = bgObj
						},
						drawArray({
							bgObj,
							type,
							bgScale,
							setBgObj,
							getBgObj
						}) {
							return [{
									type: 'image', 
									id: 'productImage',
									url: _this.url + '?date=' + new Date().getTime(),
									dx: 0,
									dy: 0,
									serialNum: 0,
									infoCallBack(imageInfo) {
										setBgObj({
											width: imageInfo.width,
											height: imageInfo.height
										});
										return {
											dWidth: imageInfo.width,
											dHeight: imageInfo.height
										}
									}
								},
								{
									type: 'qrcode', 
									text: _this.address, 
									serialNum: 4,
									size: 150,
									dx: 375, // x轴
									dy: 625, // y轴
								},
							]
						}
					});
					_this.poster.finalPath = d.poster.tempFilePath;
					_this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
				}
			},
			saveH5(url) {
				var ALink = document.createElement("a");
				ALink.download = '';
				ALink.href = url
				document.body.appendChild(ALink);
				ALink.click();
				ALink.remove();
			},
			saveImage() {
				let _this = this;
				uni.showLoading();
				this.loading = true;
				// #ifdef H5
				this.saveH5(this.poster.finalPath);
				uni.hideLoading();
				_this.loading = false;
				//#endif
				//#ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath + '?date=' + new Date().getTime(),
					success: function() {
						_this.loading = false;
						uni.hideLoading();
						uni.showToast({
							icon: 'success'
						})
					},
					fail: function() {
						uni.hideLoading();
						_this.loading = false;
						uni.showToast({
							icon: 'none',
							title: this.$t('my.saveF') 
						});
					}
				});
				//#endif
			},
			hideQr() {
				this.$emit('confirm');
				this.qrShow = false;
			}
		}
	}
</script>

<style>

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		/* width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    outline: 0;
    padding: 0 68rpx;
    transform: scale(1.2);
    perspective: 2500rpx;
    background: rgba(0, 0, 0, 0.6);
    transition: all .3s ease-in-out;
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 999;
    box-sizing: border-box; */
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.posterImage {
		width: 552rpx;
		height: 786rpx !important;
		overflow: hidden;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
